<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link rel="shortcut icon" href="favicon.ico">
    <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
    <link th:href="@{/css/font-awesome.min.css}" rel="stylesheet"/>
    <!-- bootstrap-table 表格插件样式 -->
    <link th:href="@{/ajax/libs/bootstrap-table/bootstrap-table.min.css}" rel="stylesheet"/>
    <link th:href="@{/css/animate.css}" rel="stylesheet"/>
    <link th:href="@{/css/style.css}" rel="stylesheet}"/>
    <link th:href="@{/ruoyi/css/ry-ui.css}" rel="stylesheet"/>
    <link th:href="@{/css/my.css}" rel="stylesheet"/>
    <!-- layui -->
    <script th:src="@{/ajax/libs/layui/layui.js}"></script>

    <!--页面样式文件-->
    <link rel="stylesheet" th:href="@{/dist/css/main.css}">
</head>

<body class="gray-bg">
<!--右侧主体-->

<div class="grow-seedlings">
    <!--搜索区域-->
    <div class="row rowNew">
        <div class="col-sm-12 search-area">
            <form id="formId">
                <div class="select-list">
                    <ul class="ulForm clearfix">
                        <li class="select-time">
                            <label>选择时间： </label>
                            <div class="fl inputTime-outer">
                                <input type="text" class="time-input" th:value="${beginTime}" id="startTime"
                                       placeholder="开始时间"
                                       name="params[beginTime]"/>
                                <div class="icon-rili"></div>
                            </div>
                            <span>--</span>
                            <div class="fl inputTime-outer">
                                <input type="text" class="time-input" th:value="${endTime}" id="endTime"
                                       placeholder="结束时间"
                                       name="params[endTime]"/>
                                <div class="icon-rili"></div>
                            </div>
                        </li>
                        <li class="btn-group">
                            <a class="thisYear btn btn-primary mlr_8">本年</a>
                            <a class="thisMonth btn btn-primary mlr_8">本月</a>
                            <a class="btn btn-primary mlr_8" onclick="reloadIt()"><i
                                    class="fa fa-search"></i>&nbsp;搜索</a>
                        </li>
                    </ul>
                </div>
            </form>
        </div>
    </div>
    <div class="bottom-graph yinying">
        <div class="row" style="margin: 0">
            <div class="title col-lg-12 col-md-12 col-sm-12 col-xs-12">
                各大类蔬菜育苗计划数量
            </div>
        </div>

        <div class="bottom-box">

            <div class="left col-sm-4 col-md-3 col-lg-2 col-xs-6" style="padding: 0 ">
                <ul id="tabList">
                    <li class="active">
                        <p><span>共计</span><span th:text="${statusCount.total}">2000</span></p>
                    </li>
                    <li>
                        <p><span>在执行</span><span th:text="${statusCount.onPlan}">1000</span></p>
                    </li>
                    <li>
                        <p><span>待执行</span><span th:text="${statusCount.prePlan}">300</span></p>
                    </li>
                    <li>
                        <p><span>已执行</span><span th:text="${statusCount.finished}">700</span></p>
                    </li>
                </ul>
            </div>
            <div class="right col-sm-8 col-md-9 col-lg-10 col-xs-6 active" style="padding-right: 0">
                <ul>
                    <li status="" th:attr="caiId = *{class.caiId}" onclick="detailInfo(this)"  th:each="class:${caiClass}">
                        <div class="right-top">
                            <span th:text="${class.caiName}+':'">叶菜类：</span>
                            <span th:text="${class.planCounts.total}">36</span>
                        </div>
                        <div class="right-middle" th:text="'占比'+${class.planCounts.total_rate}+'%'">占比70%</div>
                        <div class="right-bottom">
                            <p class="active" th:style="'width:'+${class.planCounts.total_rate}*1.58+'px'"></p>
                        </div>
                    </li>

                </ul>
            </div>
            <div  class="right col-sm-8 col-md-9 col-lg-10 col-xs-6 " style="padding-right: 0">
                <ul>
                    <li status="3" th:attr="caiId = *{class.caiId}" onclick="detailInfo(this)" th:each="class:${caiClass}">
                        <div class="right-top">
                            <span th:text="${class.caiName}+':'">叶菜类：</span>
                            <span th:text="${class.planCounts.onPlan}">36</span>
                        </div>
                        <div class="right-middle" th:text="'占比'+${class.planCounts.onPlan_rate}+'%'">占比70%</div>
                        <div class="right-bottom">
                            <p class="active" th:style="'width:'+${class.planCounts.onPlan_rate}*1.58+'px'"></p>
                        </div>
                    </li>

                </ul>
            </div>
            <div  class="right col-sm-8 col-md-9 col-lg-10 col-xs-6 " style="padding-right: 0">
                <ul>
                    <li status="2" th:attr="caiId = *{class.caiId}" onclick="detailInfo(this)"  th:each="class:${caiClass}">
                        <div class="right-top">
                            <span th:text="${class.caiName}+':'">叶菜类：</span>
                            <span th:text="${class.planCounts.prePlan}">36</span>
                        </div>
                        <div class="right-middle" th:text="'占比'+${class.planCounts.prePlan_rate}+'%'">占比70%</div>
                        <div class="right-bottom">
                            <p class="active" th:style="'width:'+${class.planCounts.prePlan_rate}*1.58+'px'"></p>
                        </div>
                    </li>

                </ul>
            </div>
            <div  class="right col-sm-8 col-md-9 col-lg-10 col-xs-6 " style="padding-right: 0">
                <ul>
                    <li status="4"  th:attr="caiId = *{class.caiId}" onclick="detailInfo(this)" th:each="class:${caiClass}">
                        <div class="right-top">
                            <span th:text="${class.caiName}+':'">叶菜类：</span>
                            <span th:text="${class.planCounts.finished}">36</span>
                        </div>
                        <div class="right-middle" th:text="'占比'+${class.planCounts.finished_rate}+'%'">占比70%</div>
                        <div class="right-bottom">
                            <p class="active" th:style="'width:'+${class.planCounts.finished_rate}*1.58+'px'"></p>
                        </div>
                    </li>

                </ul>
            </div>
        </div>

    </div>
</div>
</div>
</div>
<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/js/bootstrap.min.js}"></script>
<!-- 遮罩层 -->
<script th:src="@{/ajax/libs/layer/layer.min.js}"></script>
<script th:src="@{/ajax/libs/layui/layui.js}"></script>
<script th:src="@{/ruoyi/js/common.js?v=3.4.0}"></script>
<script th:src="@{/ruoyi/js/ry-ui.js?v=3.4.0}"></script>

<script th:inline="javascript">
    var ctx = [[@{
        /}]];
        layui.use('laydate', function () {
            var laydate = layui.laydate;
            var timestamp = new Date().getTime();
            var timestamp1 = new Date().getTime() + 1000 * 60 * 60 * 24 * 2;
            //执行一个laydate实例
            laydate.render({
                elem: '#test1' //指定元素
                ,
                format: "yyyy-MM-dd",
                value: new Date(timestamp)
            });
            //执行一个laydate实例
            laydate.render({
                elem: '#test2' //指定元素
                ,
                format: 'yyyy-MM',
                value: new Date(timestamp1)
            });
        });


        $("#tabList li").click(function () {
            $(this).addClass("active").siblings().removeClass("active");
            //2 根据当前li的索引值(index)找到底部对应的div，设置selected类名，其他div移除类名
            var index = $(this).index(); //获取当前li的索引值
            $(".bottom-box .right").eq(index).addClass("active").siblings().removeClass("active");
        });

        function reloadIt() {
            var link = ctx + "system/ncPlan/showPlan";
            var s = $('#startTime').val();
            var e = $('#endTime').val();

            link += "?beginTime=" + s + "&endTime=" + e;
            window.location.href = link;
        }

        $('.thisYear').click(function () {
            $('#startTime').val(new Date().getFullYear() + "-01-01");
            reloadIt();
        });

        $('.thisMonth').click(function () {
            var d = new Date();
            var m = d.getMonth() + 1;
            m = m < 10 ? '0' + m : m;
            $('#startTime').val(new Date().getFullYear() + "-" + m + "-01");
            reloadIt();
        });

        function detailInfo(obj) {

            var ancestors = $(obj).attr('caiId');
            var status = $(obj).attr('status');

            var link = ctx + 'system/ncPlan/frontPlanList?ancestors=' + ancestors + "&status=" + status;

            var s = $('#startTime').val();
            var e = $('#endTime').val();
            link += "&beginTime=" + s + "&endTime=" + e;
            $.modal.openTab("育苗计划", link);


        }


</script>
</body>

</html>
